<template>
  <div>
    <a-button type="primary" @click="showModal">
      添加角色
    </a-button>
    <!--表格区域-->
    <a-table :columns="columns" :data-source="data" bordered :pagination="pagination">
      <span slot="status" slot-scope="text,record">
       <a-switch :default-checked="record.status" @change="onChange(record.id)" />
      </span>
      <span slot="createTime" slot-scope="createTime">
        {{createTime}}
      </span>
      <span slot="action" slot-scope="text, record">
      <a-divider type="vertical" />
      <a @click="deleteById(record.id)">删除</a>
      <a-divider type="vertical" />
      <a-dropdown :trigger="['click']">
        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
          更多<a-icon type="down" />
        </a>
        <a-menu slot="overlay">
          <a-menu-item key="0" sl>
            <a @click="updateRoleInfo(record)">修改信息</a>
          </a-menu-item>
          <a-menu-item key="1">
            <a @click="selectUser(record.id)">分配用户</a>
          </a-menu-item>
          <a-menu-item key="1">
            <a @click="selecTuser(record.id)">选择用户</a>
          </a-menu-item>
          <a-menu-divider />
        </a-menu>
      </a-dropdown>
    </span>
    </a-table>

    <!--添加角色-->
    <div>
      <a-modal
          title="添加角色"
          :visible="visible"
          :confirm-loading="confirmLoading"
          @ok="handleOk"
          @cancel="handleCancel"
      >
        <a-form-model  :model="addRoleVo.code" v-bind="layout">
          <a-form-model-item has-feedback label="角色code" prop="code">
            <a-input v-model="addRoleVo.code" type="text" autocomplete="off" />
          </a-form-model-item>
        </a-form-model>
        <a-form-model  :model="addRoleVo.description" v-bind="layout">
          <a-form-model-item has-feedback label="描述" prop="description">
            <a-input v-model="addRoleVo.description" type="text" autocomplete="off" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>

    <!--修改角色-->
    <div>
      <a-modal
          title="添加角色"
          :visible="updateState"
          :confirm-loading="confirmLoading"
          @ok="updateOK"
          @cancel="updateFail"
      >
        <a-form-model  :model="updateRoleVo.code" v-bind="layout">
          <a-form-model-item has-feedback label="角色code" prop="code">
            <a-input v-model="updateRoleVo.code" type="text" autocomplete="off" />
          </a-form-model-item>
        </a-form-model>
        <a-form-model  :model="updateRoleVo.description" v-bind="layout">
          <a-form-model-item has-feedback label="描述" prop="description">
            <a-input v-model="updateRoleVo.description" type="text" autocomplete="off" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
    <!--角色对应用户列表-->
    <div>
      <a-modal v-model="selectState" title="包含用户" @ok="selectOk">
        <a-table :row-selection="rowSelection" :columns="userColumns" :data-source="userData">
          <span slot="status" slot-scope="status">
            <a-tag v-if="status" style="background-color: #3ce2af">正常</a-tag>
            <a-tag v-if="!status" style="background-color: #a8ee85">冻结</a-tag>
          </span>
          <span slot="action" slot-scope="text, record">
            <a-divider type="vertical" />
            <a @click="deleteUserRole(record.id)">删除</a>
          </span>
        </a-table>
      </a-modal>
    </div>
    <!--选择用户-->
    <div>
      <a-modal
          title="用户列表"
          :visible="selectUserState"
          :confirm-loading="confirmLoading"
          @ok="selectUserOK"
          @cancel="selectUserFail"
      >
        <a-table :row-selection="rowSelections" :columns="usersColumns" :data-source="UsersData">
          <span slot="status" slot-scope="status">
            <a-tag v-if="status" style="background-color: #3ce2af">正常</a-tag>
            <a-tag v-if="!status" style="background-color: #a8ee85">冻结</a-tag>
          </span>
        </a-table>
      </a-modal>
    </div>
  </div>
</template>

<script>

const userColumns = [
  {
    title: '用户账号',
    dataIndex: 'username',
    key: 'username',
    slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'username' },
  },
  {
    title: '用户昵称',
    dataIndex: 'nickName',
    key: 'nickName',
  },
  {
    title: '用户状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  }
]
const usersColumns = [
  {
    title: '用户账号',
    dataIndex: 'username',
    key: 'username',
    slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'username' },
  },
  {
    title: '用户昵称',
    dataIndex: 'nickName',
    key: 'nickName',
  },
  {
    title: '用户状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' },
  }
]

const columns = [
  {
    title: '角色',
    key: 'code',
    dataIndex: 'code'
  },
  {
    title: '描述',
    key: 'description',
    dataIndex: 'description'
  },
  {
    title: '角色状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    scopedSlots: { customRender: 'createTime' },
  },

  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];
const data = [];
const userData=[]
const UsersData =[]
import {deleteUserRole,addUsersForRole,getUsersForRole,getRoles,addRole,updateStatus,deleteById,getById,updateRole,getUserByRoleId} from '@/services/role'
export default {
  name: "Role",
  data(){
    return {
      data,
      columns,
      userColumns,
      userData,
      UsersData,
      usersColumns,
      roleId:'',
      updateState:false,//修改角色信息模态框状态
      visible: false,//添加角色信息模态框状态
      selectState: false,
      confirmLoading: false,
      selectUserState:false,
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
      /*添加角色属性信息*/
      addRoleVo:{
        code:'',
        description:''
      },
      /*修改角色信息*/
      updateRoleVo:{
        id:'',
        code:'',
        description: ''
      },
      users:[]

    }
  },
  created() {
    this.getRoles()
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
    rowSelections(){
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          //alert("selectedRowKeys"+selectedRowKeys)
          this.users.push(selectedRows)
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
  methods:{
    selecTuser(id){
      console.log(id)
      this.roleId = id
      this.selectUserState = true
      getUsersForRole(id).then(result=>{
        this.UsersData = result.data.data.users
      })
    },
    getRoles(){
      getRoles().then(result=>{
        this.data = result.data.data.roles
      })
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e)
      addRole(this.addRoleVo.code,this.addRoleVo.description).then(result=>{
        if (result.data.code === 0){
          this.confirmLoading = true;
          setTimeout(() => {
            this.visible = false;
            this.confirmLoading = false;
            this.getRoles()
          }, 2000);
          this.$message.success(result.data.msg,3)
        }else {
          this.$message.error(result.data.msg,3)
        }

      })
    },
    handleCancel(e) {
      console.log(e)
      console.log('Clicked cancel button');
      this.visible = false;
    },
    onChange(id){
      alert(id)
      updateStatus(id).then(result=>{
        if (result.data.code === 0) {
          this.$message.success(result.data.msg,3)
          this.getRoles()
        }
      })
    },
    deleteById(id){
      deleteById(id).then(result=>{
        if (result.data.code ===0){
          this.$message.success(result.data.msg,3)
          this.getRoles()
        }else {
          this.$message.error(result.data.msg,3)
        }
      })
    },
    updateRoleInfo(record){
      getById(record.id).then(result=>{
        if (result.data.code === 0){
          this.updateRoleVo.id = result.data.data.id
          this.updateRoleVo.code = result.data.data.code
          this.updateRoleVo.description = result.data.data.description
        }
        this.updateState = true
      })
    },
    updateOK(){
      updateRole(this.updateRoleVo.id,this.updateRoleVo.code,this.updateRoleVo.description).then(result=>{
        if (result.data.code === 0){
          this.confirmLoading = true;
          setTimeout(() => {
            this.updateState = false;
            this.confirmLoading = false;
            this.getRoles()
          }, 2000);
          this.$message.success(result.data.msg,3)
        }else {
          this.$message.error(result.data.msg,3)
        }
      })
    },
    updateFail(){
      this.updateState = false
    },
    selectUser(id){
      console.log(id)
      this.roleId = id
      this.getUsers(id)
      this.selectState = true
    },
    getUsers(id){
      getUserByRoleId(id).then(result=>{
        this.userData = result.data.data
      })
    },
    selectOk(){
      this.selectState = false
    },
    selectUserOK(){
      const userIds = []
      for (let i = 0; i < this.users.length; i++) {
        userIds.push(this.users[i][i].id)
      }
      addUsersForRole(this.roleId,userIds).then(result=>{
        if (result.data.code === 0){
          this.confirmLoading = true;
          setTimeout(() => {
            this.selectUserState = false;
            this.confirmLoading = false;
            this.$message.success(result.data.msg,3)
          }, 2000);
        }
      })
    },
    selectUserFail(){
      this.selectUserState = false
    },
    deleteUserRole(id){
      deleteUserRole(this.roleId,id).then(result=>{
        if (result.data.code === 0){
          this.$message.success(result.data.msg,3)
          this.getUsers(this.roleId)
        }else {
          this.$message.error(result.data.msg,3)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
